<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-14 09:38:38
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-17 14:07:02
-->
<template>
    <div class="selection">
        <div class="titlebar" @click="goListPage">所属片区月发货量TOP10<span class="unit">(台)</span></div>
        <yearMonth @emit="getTime"></yearMonth>
        <div class="line select">|</div>
        <model @emit="getModel" :modelList="$store.getters['fahuo/modelList']"></model>
    </div>
    <div id="monthDeliveryBar" v-if="list.length > 0"></div>
    <div id="noData" v-else>暂无数据</div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watch, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Sales, Delivery } from '@/http';
import { type } from '@/http/interface';
import { MonthDay, Model, YearMonth } from '@/components';
import dateJs from 'dayjs';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'monthDeliveryBar',
    components: {  Model, YearMonth },
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter();
        const state = reactive({
            startTime: dateJs(new Date()).format('YYYY-MM'),
            endTime: '',
            modelType: '',
            legendList: [] as any,
            dataList: [] as any,
            list: [] as any,
        });
        onMounted(() => {
            let time = dateJs(state.startTime).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        });
        function addZeroPrefix(n) {
            const str = n.toString();
            return str[1] ? str : `0${str}`;
        }
        const getTime = (v) => {
            state.startTime = v;
            let time = dateJs(v).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        };
        const getModel = (v) => {
            state.modelType = v;
            getData();
        };
        const goListPage = () => {
            router.push('/fhTable')
        }
        const getData = () => {
            const formList = {
                jx: state.modelType == '全部' ? '' : state.modelType,
                startTime: state.startTime,
                endTime: state.endTime,
            };
            Delivery.GetDeliveryByArea(formList).then((res: any) => {
                state.list = res;
                if (state.list.length == 0) return;
                state.legendList = [];
                state.dataList = [];
                let resList = res.length > 10 ? res.splice(0, 10) : res;
                resList.forEach((item) => {
                    state.legendList.push(item.arg1);
                    state.dataList.push(item.val1);
                });
                nextTick(() => {
                    draw(state.legendList, state.dataList);
                });
            });
        };
        const draw = (data1, data2) => {
            var option = {
                // backgroundColor: 'rgb(10,36,68)',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    formatter: function (params: any, ticket: any, callback: any) {
                        const item = params[0];
                        var string =
                            '<span style= "padding:0 20px">' +
                            item.name +
                            '</span>' +
                            '<span style = "padding:0 20px">' +
                            item.value +
                            '台' +
                            '</span>';
                        return string;
                    },
                    fontSize: '12px',
                    backgroundColor: '#fff', //设置背景图片 rgba格式
                    color: 'black',
                    borderWidth: '0', //边框宽度设置1
                    borderColor: 'transparent', //设置边框颜色
                    textStyle: {
                        color: '#000', //设置文字颜色
                    },
                    extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    minInterval: 1, //只显示整数
                    // data: ['片区','片区','片区','片区','片区','片区','片区','片区','片区','片区'],
                    data: data1,
                    axisLabel: {
                        show: true,
                        color: '#fff',
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(0,207,255,0.5)',
                        },
                    },
                    //  单独隐藏刻度线：
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['rgba(0,207,255,0.5)'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
                yAxis: {
                    type: 'value', // 种类，类别
                    axisLabel: {
                        show: true,
                        color: '#fff',
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(0,207,255,0.5)',
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['rgba(0,207,255,0.5)'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                    //  单独隐藏刻度线：
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '10',
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },

                        // data: [100,90,80,70,60,50,40,30,20,10],
                        data: data2,

                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#C00AFF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#00FFB7',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#FFE600',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#FFE600',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#2FFAFC',
                                            },
                                            {
                                                offset: 1,
                                                color: 'transparent',
                                            },
                                        ]),
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                    },
                ],
            };
            let myChart = echarts.init(document.getElementById('monthDeliveryBar') as HTMLElement);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            myChart.setOption(option);
        };

        return {
            ...toRefs(state),
            getTime,
            getModel,
            goListPage
        };
    },
});
</script>

<style lang="scss" scoped>
#monthDeliveryBar {
    margin: 0 20px;
    width: calc(100%-40px);
    height: 250px;
}
#noData {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
